<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
        <div style="height: 10px;"></div>
        <el-form :model="addBasePermissionForm" ref="addBasePermissionRef" :rules="addBasePermissionrules">
            <el-form-item label="应用类型" :label-width="formLabelWidth" prop="type">
                <el-select v-model="addBasePermissionForm.type" placeholder="请选择应用类型" class="el-my-select" ref="type">
                    <el-option label="PC应用" :value="1"></el-option>
                    <el-option label="手机应用" :value="2"></el-option>
                    <!-- <el-option label="基础平台菜单" value="3"></el-option> -->
                </el-select>
            </el-form-item>
            <el-form-item label="权限规则	" :label-width="formLabelWidth" prop="url">
                <el-input v-model="addBasePermissionForm.url" autocomplete="off" ref="name"
                    placeholder="请填写权限规则	"></el-input>
            </el-form-item>
            <el-form-item label="权限名称" :label-width="formLabelWidth" prop="name">
                <el-input v-model="addBasePermissionForm.name" autocomplete="off" ref="name"
                    placeholder="请填写权限名称"></el-input>
            </el-form-item>
            <!-- <el-form-item label="路由地址" :label-width="formLabelWidth"
                                      prop="name">
                            <el-input
                                    v-model="addBasePermissionForm.pageUrl"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写路由地址或模块地址"
                            ></el-input>
                        </el-form-item> -->
            <!-- <el-form-item label="父ID" :label-width="formLabelWidth"
                                      prop="parentId" v-if="addBasePermissionForm.id">
                            <el-input
                                    v-model="addBasePermissionForm.parentId"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写父ID"
                            ></el-input>
                        </el-form-item> -->
            <el-form-item label="权限描述" :label-width="formLabelWidth" prop="detail">
                <el-input v-model="addBasePermissionForm.detail" autocomplete="off" ref="name"
                    placeholder="请填写权限描述"></el-input>
            </el-form-item>
            <el-form-item label="权重" :label-width="formLabelWidth" prop="sortNum">
                <el-input v-model="addBasePermissionForm.sortNum" autocomplete="off" type="number" ref="name"
                    placeholder="请填写权重"></el-input>
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
    name: "AddBasePermission",
    components: { ElForm, ElMessage },
    data() {
        return {
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            personnelType: "",
            addBasePermissionForm: {
                url: "",
                name: "",
                parentId: "",
                detail: "",
                sortNum: "",
                pageUrl: "",
                type: 1,
            },
            // 校验规则
            addBasePermissionrules: {
                url: vxRule(true, null, "blur"),
                name: vxRule(true, null, "blur"),
            },
        };
    },
    methods: {
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },
        getBasePermissionById(id) {
            httpService("/javaApi/basePermission/queryById", { id: id }, "get").then(
                (data) => {
                    this.addBasePermissionForm = data;
                }
            );
        },
        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.addBasePermissionForm.id = "";
            this.addBasePermissionForm.url = "";
            this.addBasePermissionForm.name = "";
            this.addBasePermissionForm.parentId = "";
            this.addBasePermissionForm.detail = "";
            this.addBasePermissionForm.sortNum = "";
            this.addBasePermissionForm.type = 1;
        },
        save() {
            this.$refs.addBasePermissionRef.validate((valid) => {
                if (valid) {
                    let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                    params.append("url", this.addBasePermissionForm.url);
                    params.append("name", this.addBasePermissionForm.name);
                    params.append("pageUrl", this.addBasePermissionForm.pageUrl);
                    params.append("detail", this.addBasePermissionForm.detail);
                    params.append("sortNum", this.addBasePermissionForm.sortNum);
                    params.append("type", this.addBasePermissionForm.type);
                    if (this.addBasePermissionForm.id) {
                        params.append("id", this.addBasePermissionForm.id);
                        httpService("/javaApi/basePermission/edit", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("修改成功");
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getBasePermissionList();
                                } else {
                                    ElMessage.error("修改失败");
                                }
                            }
                        );
                    } else {
                        httpService("/javaApi/basePermission/add", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("添加成功");
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getBasePermissionList();
                                } else {
                                    ElMessage.error("添加失败");
                                }
                            }
                        );
                    }
                } else {
                    return false;
                }
            });
        },
    },
};
</script>
<style>
.el-dialog__header {
  padding: var(--el-dialog-padding-primary);
  padding-bottom: 10px;
  border-bottom: 1px solid #dedede;
}
</style>